import React, { useState } from 'react';
import { Modal, Form, Select, Row, Col, Table, notification } from 'antd';
import { FormComponentProps } from 'antd/es/form';
import { PAGE, ALL } from '@/utils/constant';
import { studentsList } from '@/services/api';

interface UserFormProps extends FormComponentProps {
  clasesData: any;
  onClose: () => void;
}

const columns = [
  {
    title: '姓名',
    key: 'name',
    dataIndex: 'name',
  },
  {
    title: 'id',
    key: 'id',
    dataIndex: 'id',
  },
  {
    title: '语文',
    key: 'chinese',
    dataIndex: 'chinese',
  },
  {
    title: '数学',
    key: 'math',
    dataIndex: 'math',
  },
  {
    title: '英语',
    key: 'english',
    dataIndex: 'english',
  },
  {
    title: '政治',
    key: 'politics',
    dataIndex: 'politics',
  },
  {
    title: '历史',
    key: 'history',
    dataIndex: 'history',
  },
  {
    title: '地理',
    key: 'geographic',
    dataIndex: 'geographic',
  },
  {
    title: '生物',
    key: 'biological',
    dataIndex: 'biological',
  },
  {
    title: '物理',
    key: 'physical',
    dataIndex: 'physical',
  },
  {
    title: '化学',
    key: 'chemical',
    dataIndex: 'chemical',
  },
  {
    title: '体育',
    key: 'sport',
    dataIndex: 'sport',
  },
  {
    title: '音乐',
    key: 'music',
    dataIndex: 'music',
  },
];

const formItemLayout = {
  labelCol: {
    xs: { span: 6 },
  },
  wrapperCol: {
    sm: { span: 18 },
  },
};
const { Item } = Form;
const DownloadModal = Form.create<UserFormProps>()(
  ({ form: { getFieldDecorator }, onClose, clasesData }: any) => {
    const [isLoading, setIsLoading]: any = useState(false);
    const [tableData, setTableData]: any = useState([]);
    const formatJson = (filterVal: string[], jsonData: object[]) => {
      return jsonData.map(v => filterVal.map(j => v[j]));
    };
    const handlerExcleDownload = () => {
      if (!tableData.length) {
        notification.error({
          message: '请选择班级',
        });
        return;
      }
      import('@/utils/ExcleTools').then(excel => {
        const tHeader: string[] = [
          '名字',
          'id',
          '语文',
          '数学',
          '英语',
          '政治',
          '历史',
          '地理',
          '生物',
          '物理',
          '化学',
          '体育',
          '音乐',
        ];
        const filterVal: string[] = ['name', 'id'];
        const data = formatJson(filterVal, tableData);

        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: `${tableData[0].clase.name}的成绩模板`,
        });
      });
      onClose();
    };
    return (
      <Modal
        visible
        onCancel={onClose}
        maskClosable={false}
        width="80%"
        title="下载模板"
        onOk={handlerExcleDownload}
      >
        <Form {...formItemLayout}>
          <Row>
            <Col span={6}>
              <Item label="班级">
                {getFieldDecorator('clase_id')(
                  <Select
                    placeholder="请选择"
                    allowClear
                    showSearch
                    filterOption={(input: any, option: any) =>
                      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    onChange={value => {
                      setIsLoading(true);
                      studentsList({ clase_id: value, is_arranged: true, page: PAGE, size: ALL })
                        .then((resp: any) => {
                          if (resp.status === 'success') {
                            setTableData(resp.data.data);
                          }
                          setIsLoading(false);
                        })
                        .catch(() => {
                          setIsLoading(false);
                        });
                    }}
                  >
                    {clasesData &&
                      clasesData.map((item: any) => (
                        <Select.Option value={item.id} key={item.id}>
                          {item.name}
                        </Select.Option>
                      ))}
                  </Select>,
                )}
              </Item>
            </Col>
          </Row>
        </Form>
        <Table loading={isLoading} dataSource={tableData} columns={columns} />
      </Modal>
    );
  },
);

export default DownloadModal;
